<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
			<navbar :bgColor="bgColor" :btnColors='btnColor' title="商务合作" :isGoBack="true" :isNotice="true" :visible="true"></navbar>
		<!-- #endif -->
		<view class="opinion_wrap">
		  <view class="header">
		        <image src="/static/cooperate/logo.png" class="logo_ims" ></image>
				<view class="">
					<image src="/static/cooperate/logos.png" class="logo_tab" ></image>
				</view>
		  </view>
		 
		  <view class="cooperate">
				<view class="flex">
					<view class="logo_image">
						<view class="flex ">		
							<image src="/static/cooperate/xhs.png" class="logo_c" ></image>
							<image src="/static/cooperate/tb.png" class="logo_images" ></image>
						</view>
						<view class="flex mt-20">
							<image src="/static/cooperate/email.png" class="logo_c"></image>
						</view>
						<view class="flex mt-20">
							<image src="/static/cooperate/wechat.png" class="logo_c"></image>
						</view>
					</view>
					<view class="middel ml-20">
						
					</view>
					<view class="flex flex-direction ml-20">
						<text class="address">{{list.bookaddrss}}</text>
						<text class="address">{{list.emailaddress}}</text>
						<text class="address">{{list.wechataddress}}</text>
					</view>
				</view>
				<view class="flex flex-wrap classify">
					<view class="flex classify-cell">
						<image :src="list.CooperateOne" class="CooperateImage"  @longpress="saveQr(1)"></image>
					</view>
					
					<view class="flex classify-cell">
						<image :src="list.CooperateTwo" class="CooperateImage" @longpress="saveQr(2)"></image>
					</view>
					
					<view class="flex classify-cell">
						<image :src="list.CooperateThree" class="CooperateImage" @longpress="saveQr(3)"></image>
					</view>

				</view>
		  </view>
		</view> 		 
	</view>	
</template>

<script>
	export default {
		data () {
			return {
				...getApp().globalData.config,				
				list:'',				
			}			
		},		
		onLoad(e) {		
		},	
		onShow() {
			this.queryabout()
		},
		methods:{
			 ...getApp().globalData.function,	
			
			queryabout(){
				let that=this
				this.$http.getAbout().then(res=>{
					that.list=res.data
				})
			},
	
			saveQr(number){
				let imgUrl=''
				if(number==1)  imgUrl=this.list.CooperateOne
				else if(number==2) imgUrl=this.list.CooperateTwo
				else if(number==3) imgUrl=this.list.CooperateThree
				uni.downloadFile({
				url: imgUrl,
				success: (res) => {
					console.log(res);
					if (res.statusCode === 200) {
					// 文件下载成功，获取临时文件路径
					const tempFilePath = res.tempFilePath;
					console.log(tempFilePath);
					// 使用uni.saveImageToPhotosAlbum保存图片到相册
					uni.saveImageToPhotosAlbum({
					  filePath: tempFilePath, // 图片路径
					  success: function () {
						uni.showToast({
						  title: '保存成功',
						  icon: 'success'
						});
					  },
					  fail: function (err) {
						uni.showToast({
						  title: '保存失败',
						  icon: 'none'
						});
					  }
					});
					} else {
					uni.showToast({
						title: '文件下载失败',
						icon: 'none'
					});
					}
				},
				fail: (err) => {
					uni.showToast({
					title: '下载失败',
					icon: 'none'
					});
					console.error('下载失败：', err);
				}
				});
			},

				
		}
	}
</script>

<style>
	page{
		background-color: #E0DCD1;
	}
	
	.logo_tab{
		width: 285rpx;
		height: 138rpx;
	}
	
	.logo_ims{
		width: 168rpx;
		height: 183rpx;
	}
	.tb{
		width: 32rpx;
		height: 32rpx;
	}
	.address{
		font-family: Microsoft YaHei, Microsoft YaHei;
		font-size: 36rpx;
		color: #518FA0;
		line-height: 48rpx;
	}
	.logo_image{
		display: flex;
		flex-direction: column;
		margin-left: 65px;
		margin-bottom: 50px;
		position: relative;
	}
	.logo_images{
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: 20px;
	}
	.nav-bar-wrap{
		background-color: #E0DCD1 !important;
	}
	.header {
		padding: 160rpx 50rpx 60rpx 50rpx;
		/* border-bottom: 1px solid #ccc; */
		text-align: center;
		width: 650rpx;
		height: 300rpx;
		/* line-height: 450rpx; */	 
	}
	/* .header image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		
	} */	
	.cooperate{
		display: flex;
		flex-direction: column;
		position: fixed;
		bottom: 28px;
		
	}
	.CooperateImage{
		width: 164rpx;
		height: 164rpx;
	}
	.classify {
		display: flex;
		flex-direction: row;
        margin-left: 90rpx;
		margin-right: 40rpx;
		justify-content: space-between;
		margin-top: -30px;
	}
	
	.classify-cell{
		margin-right: 20px;
		margin-top: 20rpx;
	}
	
	.middel{
		width: 2rpx;
		height: 129rpx;
		background: #518FA0;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	
	.logo_c{
		width: 32rpx;
		height: 32rpx;
	}
	
	
	
</style>